<template>
  <div class="">
    <h1>注册页面</h1>
    <ul>
      <li><span>账号：</span> <input v-model="from.account" type="text" /></li>
      <li><span>密码：</span> <input v-model="from.psw" type="password" /></li>
    </ul>
    <!-- 按钮 -->
    <div class="btn">
      <AppButton :disabled="loading" text="注册" @click.native="registerHandle">
        <template v-if="loading">
          <img
            src="https://www.bing.com/th/id/OGC.dd38dc5bb51e008229a84af6edf61b61?pid=1.7&rurl=https%3a%2f%2fwww.itbiancheng.com%2fuploads%2fallimg%2f181020%2f1-1Q020111TaH.gif&ehk=gEQb7AMI5GElK3NVHmaqGCir7SuX8Ly%2b%2fboSCVs7sfQ%3d"
            alt=""
          />
        </template>
      </AppButton>
      <AppButton text="去登录" @click.native="$router.push('/login')">
      </AppButton>
    </div>
  </div>
</template>

<script>
import AppButton from "../components/appButton.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      pawData: JSON.parse(localStorage.getItem("pawData")) || [],
      from: {
        account: "",
        psw: "",
      },
      num: 2,
      loading: false,
      timer: null,
    };
  },
  mounted() {},
  methods: {
    registerHandle() {
      if (!this.from.account || !this.from.psw) {
        Toast.success("账户或者密码为空");
        return;
      }
      let reg = /[\d\w]{12}/;
      if (reg.test(this.from.account)) {
        Toast.success("账号密码只能为数字和密码，12位");
        return;
      }
      let flag = false;
      this.pawData.forEach((item) => {
        if (item.account == this.from.account ) {
          flag = true;
        }
      });
      if (!flag) {
        this.loading = true; // 开启 loading 动画
        //   注册

        this.timer = setInterval(() => {
          if (this.num <= 0) {
            clearInterval(this.timer);
            this.pawData.push(JSON.parse(JSON.stringify(this.from)));
            Toast.success("注册成功");
            this.loading = false;
          } else {
            this.num--;
          }
        }, 1000);
      } else {
        Toast.success("账户已存在无法注册");
      }
    },
  },
  watch: {
    pawData: {
      handler() {
        localStorage.setItem("pawData", JSON.stringify(this.pawData));
      },
    },
  },
  components: { AppButton },
};
</script>

<style lang="scss">
img {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-color: rgb(43, 153, 226);
  border-radius: 5px;
}
.btn {
  margin-top: 30px;
  width: 300px;
  height: 30px;
  display: flex;
  justify-content: space-around;
}
</style>
